<template>
    <div>
        <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '#' }">
                运动会比赛秩序管理
            </el-breadcrumb-item>
            <el-breadcrumb-item>
                <a href="#">竞赛分组表</a>
            </el-breadcrumb-item>
        </el-breadcrumb>
        <el-card class="ga-card">
            <el-row class="ga-select">
                <el-col :span="2">
                    <div class="ag_field">
                        <el-form>
                            <el-form-item label="场号">
                                <el-select v-model="scfield">
                                    <el-option v-for="i in fieldnum" :key="i" :label="i" :value="i">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-form>
                    </div>
                </el-col>
                <el-col class="col15" :span="22">
                    <el-button type="primary" @click="horizontalExcel">横排导出</el-button>
                    <el-button type="primary" @click="VerticalRowExcel">竖排导出</el-button>
                    <el-checkbox class="col-check" v-model="checked"></el-checkbox>
                </el-col>
            </el-row>

            <el-table :data="currentPageData" border stripe>
                <el-table-column prop="mano" label="顺序" width="60">
                </el-table-column>
                <el-table-column prop="sexName" label="性别">
                </el-table-column>
                <el-table-column prop="gridName" label="组别">
                    <template #default="scope">
                        {{ scope.row.gridName }}
                        <span v-if="scope.row.nr !== 0">,</span>
                        {{ scope.row.nrName }}
                        <span v-if="scope.row.wr !== 0">,</span>
                        {{ scope.row.wrName }}
                    </template>
                </el-table-column>
                <el-table-column prop="msidName" label="项目">
                </el-table-column>
                <el-table-column prop="stage" label="阶段">
                </el-table-column>
                <el-table-column prop="stidName" label="塞别">
                </el-table-column>
                <el-table-column prop="plcnt" label="人员">
                </el-table-column>
                <el-table-column prop="grcnt" label="组数">
                </el-table-column>
                <el-table-column label="操作" align="center" fixed="right">
                    <template #default="scope">
                        <el-button type="primary" @click="viewAthletes(scope.row)">查看</el-button>
                        <!-- <el-button type="warning" @click="arrangeEvent(scope.row)">编排</el-button> -->
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination class="paging" @size-change="handleSizeChange" @current-change="handlePageChange" background
                :page-sizes="[3, 5, 10, 15, 20, 50]" layout="total, prev, pager, next, jumper" :total="total"
                :page-size="queryObj.limit" :current-page="queryObj.page">
            </el-pagination>

            <el-dialog title="运动员详细信息" v-model="viewdialogVisible" draggable width="70%">
                <div class="view_top">
                    <el-form label-width="59">
                        <el-form-item label="组：">
                            <el-select v-model="lagroup" @change="watchGroup">
                                <el-option v-for="i in groupnum" :key="i" :label="i" :value="i">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-form>
                </div>
                <el-form>
                    <table class="viewtable" cellspacing="0" cellpadding='5' width="100%">
                        <tbody :model="laneData">
                            <tr class="header_tr">
                                <td>泳道</td>
                                <td>运动员1</td>
                                <td>运动员2</td>
                                <td>运动员3</td>
                                <td>运动员4</td>
                                <td class="viewDelegation">代表队</td>
                            </tr>
                            <tr v-for="i in 10" :key="i">
                                <td v-if="sno === 0">{{ i - 1 }}</td>
                                <td v-if="sno === 1">{{ i }}</td>
                                <td v-for="e in 4" :key="e">
                                    <el-select name="nihao" v-model="laneData[dynamicLaneKey(i, e)]" placeholder="">
                                        <el-option label=" " :value="0"></el-option>
                                        <el-option v-for="(item, index) in laneData['tiid' + i + 'Player']"
                                            :key="index + 1" :label="item.name" :value="item.plid"></el-option>
                                    </el-select>
                                </td>
                                <td>
                                    <el-select v-model="laneData['tiid' + i]" placeholder="">
                                        <el-option label=" " :value="0"></el-option>
                                        <el-option v-for="(item, index) in compeData" :key="index + 1"
                                            :label="item.tname" :value="item.tiid"></el-option>
                                    </el-select>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="viewdialogVisible = false">取 消</el-button>
                    <el-button type="primary" @click="editinfo">修 改</el-button>
                </div>
            </el-dialog>
        </el-card>
    </div>
</template>

<script>
import XLSX from 'xlsx'
export default {
    components: {
        XLSX,
    },
    data() {
        return {
            fieldnum: null,
            sno: null,
            scfield: 1,
            viewdialogVisible: false,
            checked: false,
            gamData: [],
            queryObj: {
                limit: 10,
                page: 1,
                query: " "
            },
            total: 0,
            currentPageData: [],
            // 查看
            groupnum: null,
            lagroup: 1,
            laneData: {},
            selName: [],
            dqtable: {},
            compeData: [],
        }
    },
    created() {
        this.getGamenameList();
        this.getScheduleinfoList(this.scfield);
        this.getComunitinfoList();
    },
    methods: {
        // 查询
        async getGamenameList() { // 场号
            const result = await this.$http.post(this.BACKEND_URL + '/meeting/getmsg');
            if (result.data.code == 0) {
                this.fieldnum = result.data.data.chcnt
                this.sno = result.data.data.sno
            } else if (result.data.code == 500) {
                console.log(result.data.msg)
            }
        },
        async getScheduleinfoList(chno) { // 数据
            try {
                const result = await this.$http.post(this.BACKEND_URL + '/show/getmsg', { chno: chno });
                if (result.data.code == 0) {
                    this.gamData = result.data.data
                    this.total = this.gamData.length
                    this.fetchData()
                } else if (result.data.code == 500) {
                    console.log(result.data.msg)
                }
            } catch (error) {
                if (error === undefined) {
                    this.$message.error('连接错误-获取数据失败');
                }
            }
        },
        async getComunitinfoList() {
            const result = await this.$http.get(this.BACKEND_URL + '/team/getmsg');
            if (result.data.code == 0) {
                this.compeData = result.data.data
            } else if (result.data.code == 500) {
                console.log(result.data.msg)
            }
        },
        // 获取当前泳道运动员
        // async handleSelectOpen(rowIdx) {
        //     const tiidValue = this.laneData['tiid' + rowIdx];
        //     this.dqtable.tiid = tiidValue
        //     const result = await this.$http.post(this.BACKEND_URL + '/player/getathlets',this.dqtable);
        //     console.log(result)
        //     if (result.data.code == 0) {
        //         this.selName = result.data.data

        //     } else if (result.data.code == 500) {
        //         console.log(result.data.msg)
        //     }
        // },
        // 选择组号查看
        async watchGroup(val) {
            this.dqtable.heatno = val
            const result = await this.$http.post(this.BACKEND_URL + '/player/getMsg', this.dqtable);
            if (result.data.code == 0) {
                this.laneData = result.data.data
            } else if (result.data.code == 500) {
                console.log(result.data.msg)
            }
        },
        // 每行每列运动员
        dynamicLaneKey(i, e) {
            if (e === 1) {
                return 'lane' + i + 'plid';
            } else {
                return 'lane' + i + 'plid' + e;
            }
        },
        // 全部代表队的id
        allDelegationId() {
            const tiidValuesObject = {};
            for (let i = 1; i <= 9; i++) {
                tiidValuesObject['tiid' + i] = this.laneData['tiid' + i];
            }
        },
        // 查看接口
        async viewAthletes(e) {
            this.viewdialogVisible = true
            this.dqtable = e
            this.groupnum = e.grcnt
            e.heatno = this.lagroup
            const result = await this.$http.post(this.BACKEND_URL + '/player/getMsg', e);
            if (result.data.code == 0) {
                this.laneData = result.data.data
                this.dynamicLaneKey()
                this.allDelegationId()
            } else if (result.data.code == 500) {
                if (result.data.msg = 'Source must not be null') {
                    this.$message.error('该项目未编排，请返回编排页面进行编排')
                    this.laneData = []
                } else {
                    console.log(result.data.msg)
                    this.laneData = []
                }
            }
        },
        // 修改
        async editinfo() {
            const result = await this.$http.post(this.BACKEND_URL + '/player/updateMsg', this.laneData)
            if (result.data.code == 0) {
                this.viewAthletes(this.dqtable)
                this.$message.success('修改成功')
            } else if (result.data.code == 500) {
                this.viewAthletes(this.dqtable)
                this.$message.error(result.data.msg)
            }
        },
        arrangeEvent(ind) {
            window.open(this.$router.resolve({ path: '/pmatch_pmid', query: { id: ind.mano } }).href, '_blank')
        },
        // 横排导出表格
        async horizontalExcel() {
            try {
                const result = await this.$http.get(this.BACKEND_URL + '/player/export', {
                    responseType: 'blob',
                });

                let downloadUrl = window.URL.createObjectURL(new Blob([result.data]));

                const link = document.createElement('a');
                link.href = downloadUrl;
                link.setAttribute('download', '分组表S.xlsx');
                document.body.appendChild(link);
                link.click();
                document.body.removeChild(link);
            } catch (error) {
                console.error('File export failed:', error);
            }
        },
        // 竖排导出表格
        async VerticalRowExcel() {
            try {
                const result = await this.$http.get(this.BACKEND_URL + '/player/export1', {
                    responseType: 'blob',
                });

                let downloadUrl = window.URL.createObjectURL(new Blob([result.data]));

                const link = document.createElement('a');
                link.href = downloadUrl;
                link.setAttribute('download', '秩序单S.xlsx');
                document.body.appendChild(link);
                link.click();
                document.body.removeChild(link);
            } catch (error) {
                console.error('File export failed:', error);
            }
        },
        // 分页
        fetchData() {
            let startIndex = (this.queryObj.page - 1) * this.queryObj.limit;
            let endIndex = startIndex + this.queryObj.limit;
            this.currentPageData = this.gamData.slice(startIndex, endIndex);
        },
        handleSizeChange(newSize) {
            this.queryObj.limit = newSize
        },
        handlePageChange(newPage) {
            this.queryObj.page = newPage;
            let startIndex = (newPage - 1) * this.queryObj.limit;
            let endIndex = startIndex + this.queryObj.limit;
            this.currentPageData = this.gamData.slice(startIndex, endIndex);
        }
    },
    watch: {
        scfield(newGroupName, oldGroupName) {
            if (newGroupName !== oldGroupName) {
                this.getScheduleinfoList(newGroupName);
            }
        },
    },
}
</script>

<style lang="less" scoped>
.ga-card {
    margin-top: 15px;
}

.col15 {
    text-align: right;

    .col-check {
        margin-left: 10px;
    }
}

.dialog-footer {
    margin-top: 15px;
}

.viewtable {
    .header_tr {
        background-color: #FEFEDF;
    }
}

.paging {
    padding-top: 15px;
}

@media (max-width: 1450px) {
    .ag_field {
        width: 97.5px;
    }
}

.viewDelegation {
    background-color: aqua
}
.view_top{
    width: 140px;
}
</style>